<template>
    <div id="container"></div>
</template>

<script setup lang='ts'>
import { onMounted, onUnmounted } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
import locationImg from '@/assets/images/icon-location.png'
let map: any = null;
let autoSearch: any = null;
let placeSearch: any = null;
let singlePolMarker: any = null;

const handlePolSel = (...args) => {
    const [lng, lat] = args[1];
    // 平移地圖
    map.setZoomAndCenter(...args);
    // 添加marker
    const position = new AMap.LngLat(lng, lat); //Marker 经纬度
    if (!singlePolMarker) {
        singlePolMarker = new AMap.Marker({
            position: position,
            content: `<img class="locationImg" width="20px" height="20px" src="${locationImg}">`, //将 html 传给 content
            offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
        });
        map.add(singlePolMarker);
    } else {
        singlePolMarker.hide();
        singlePolMarker.setPosition(position);
        singlePolMarker.setContent(`<img class="locationImg" width="20px" height="20px" src="${locationImg}">`);
        singlePolMarker.show();
    }
}
const polSearch = (val, cb) => {
    placeSearch.search(val, cb);
}

const getPolDetailById = (id, cb) => {
    placeSearch.getDetails(id, cb)
}


// 将此方法暴露给父组件App.vue
defineExpose({
    handlePolSel: (...args) => handlePolSel(...args),
    polSearch: (...args) => polSearch(...args),
    getPolDetailById: (...args) => getPolDetailById(...args),
})


onMounted(() => {
    window._AMapSecurityConfig = {
        securityJsCode: "37ceee1133e926faabecca3aaa29d047",
    };
    AMapLoader.load({
        key: "1620d77323fe8322f1747b504041e937", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale", "AMap.PlaceSearch"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    }).then((AMap) => {
        map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "2D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: [116.397428, 39.90923], // 初始化地图中心点位置
        });
        placeSearch = new AMap.PlaceSearch({
            city: '全国',
        });
        // 引入自动搜索功能
        AMap.plugin('AMap.AutoComplete', function () {
            autoSearch = new AMap.AutoComplete({
                city: '全国',
                datatype: 'all'
            });
        });
    }).catch((e) => {
        console.log(e);
    });
})

onUnmounted(() => {
    map?.destroy();
});

</script>
<style scoped lang="scss">
#container {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
}
</style>
<style lang="scss">
.locationImg {
    animation: icon_transition 0.6s ease-in-out;
}

@keyframes icon_transition {
    0% {
        transform: rotate(30deg);
        height: 0px;
        width: 0px;
    }

    18% {
        height: 20px;
        width: 20px;
    }

    30% {

        transform: rotate(-25deg);
    }

    56% {
        transform: rotate(18deg);
    }

    83% {
        transform: rotate(-13deg);
    }

    100% {
        transform: rotate(0deg);
    }
}
</style>